import TinyReact from './TinyReact'

const root = document.querySelector('#root')

const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2>(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input value="3" type="text" />
  </div>
)

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="333">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <button onClick={() => alert("你好!!!")}>点击我</button>
    <input value="13" type="text" />
  </div>
)

// TinyReact.render(virtualDOM, root)

// setTimeout(() => {
//   TinyReact.render(modifyDOM, root)
// }, 2000);

// console.log(virtualDOM)

function Heart(props) {
  return <div>{props.title}&hearts;</div>
}

class Alert extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: "default title"
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      title: "changed title"
    })
  }
  componentWillReceiveProps(props) {
    console.log(props)
  }
  componentDidUpdate(props) {
    console.log(props)
  }
  render() {
    return <div>
      {this.props.name}{this.props.age}
      <div>{this.state.title}</div>
      <button onClick={this.handleClick}>button</button>
      </div>
  }
}

// TinyReact.render(<Alert name="张三" age="20" />, root)

// setTimeout(() => {
//   TinyReact.render(<Alert name="李四" age="22" />, root)
//   // TinyReact.render(<Heart title="heart" />, root)
// }, 2000)

// class DemoRef extends TinyReact.Component {
//   constructor(props) {
//     super(props)
//     this.handleClick = this.handleClick.bind(this)
//   }
//   handleClick() {
//     // console.log(this.input)
//     console.log(this.heart)
//   }
//   render() {
//     return <div>
//       <input type="text" ref={input => this.input = input} />
//       <button onClick={this.handleClick} >button</button>
//       <Alert name="张三" age="23" ref={comp => (this.heart = comp)} />
//     </div>
//   }
// }

// TinyReact.render(<DemoRef />, root)

class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [
        {id: 1, name: "张三"},
        {id: 2, name: "李四"},
        {id: 3, name: "王五"},
      ]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    const _arr = JSON.parse(JSON.stringify(this.state.persons))
    // _arr.push(_arr.shift())
    // _arr.splice(1, 0, {id: 33, name: "六六"})
    _arr.pop()
    this.setState({
      persons: _arr
    })
  }
  render() {
    return <div>
      <ul>
        {
          this.state.persons.map(v => {
            return <li key={v.id}>{v.name}</li>
          })
        }
      </ul>
      <button onClick={this.handleClick}>button</button>
    </div>
  }

}

TinyReact.render(<KeyDemo />, root)